<template>
  <div class="ecology-banner-2">
    <div class="container">
      <div class="query-row f f-ac f-jb">
        <Title title="我们的硬件生态" color="#0e0b31" bold="700" />
        <div class="query-search f f-ac">
          <el-input v-model="queryParams.name" placeholder="搜索" maxlength="20" clearable
            @keyup.enter.prevent="handleSearch" />
          <el-icon size="20" color="#c4c4c4" @click="handleSearch">
            <IEpSearch />
          </el-icon>
        </div>
      </div>
      <div class="ecology-list g g3 gap20">
        <div v-slide-plus v-for="(item, k) in dataList" :key="k" class="ecology-item">
          <div class="ecology-top">
            <div class="ecology-img">
              <img :src="publicSrc(item.cover)" />
            </div>
            <Title :title="item.name" color="#fff" size="20" bold="700" :sub-title="item.model" sub-size="14"
              sub-color="#fff" />
          </div>
          <div class="ecology-bottom f f-ac f-jb">
            <Title title="查看详情" color="#0e0b31" size="16" bold="700" />
            <el-icon size="20" color="#409eff" @click="handleDetail(item)">
              <IEpRight />
            </el-icon>
          </div>
        </div>
      </div>
      <Pagination v-model:page-num="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total"
        :page-sizes="[6, 12, 18, 24]" @change="getList" />
    </div>
    <Product-dialog v-model="detailShow" :id="ecologyId" @comfirm="comfirmProduct" @close="closeDetail" />
  </div>
</template>
<script setup lang="ts">
  import { publicSrc } from "@/utils/common";
  import { productList } from "@/api/ecology";
  const router = useRouter();

  const props = defineProps({
    typeId: {
      type: [String, Number],
      default: "",
    },
  });

  const queryParams = reactive({
    name: "", // 产品名称
    pageNum: 1, // 当前页
    pageSize: 6, // 每页条数
    typeId: props.typeId, // 类型
    status: 0, // 0显示 1隐藏
  });
  const total = ref < number > (0); // 总条数
  const dataList = ref < any > ([]); // 列表数据
  const detailShow = ref < boolean > (false); // 详情弹窗
  const ecologyId = ref < any > (""); // 详情数据ID

  onMounted(() => {
    getList();
  });

  watch(props, () => {
    queryParams.typeId = props.typeId;
    queryParams.pageNum = 1;
    getList();
  });

  // 搜索
  const handleSearch = () => {
    queryParams.pageNum = 1;
    getList();
  };

  // 获取列表
  const getList = () => {
    productList(queryParams).then((res: any) => {
      if (res.code === 200) {
        let list = res.rows.map((item: any) => {
          return {
            ...item,
            cover: item.image ? item.image.split(",")[0] : "",
          };
        });
        dataList.value = list;
        total.value = res.total;
      }
    });
  };

  // 查看详情
  const handleDetail = (item: any) => {
    router.push({
      path: "/pc/ecology/detail",
      query: {
        title: encodeURIComponent(`生态产品：${item.name}`),
        id: item.id,
      },
    });
    return
    ecologyId.value = item.id;
    detailShow.value = true;
  };

  // 咨询产品
  const comfirmProduct = (info: any) => {
    router.push({
      path: "/pc/contact",
      query: {
        title: encodeURIComponent(`生态产品：${info.name}`),
      },
    });
  };

  // 关闭弹窗
  const closeDetail = () => {
    ecologyId.value = {};
  };
</script>
<style lang="scss" scoped>
  .ecology-banner-2 {
    width: 100%;
    background-color: #f9f9f9;
    padding: 80px 0;
    box-sizing: border-box;

    .container {
      height: 100%;

      .query-row {
        width: 100%;

        .query-search {
          height: 50px;
          width: 359px;
          background-color: #ececee;

          .el-input {
            height: 100%;
            background-color: transparent;
            box-shadow: none;
            border: none;
            outline: none;
          }

          .el-icon {
            width: 50px;
            font-size: 30px;
          }
        }
      }

      .ecology-list {
        margin-top: 40px;

        .ecology-item {
          width: 100%;
          height: 440px;
          box-shadow: 0 0 10px 0 rgba(94, 94, 94, 0.1);
          transition: all 0.3s;

          .ecology-top {
            width: 100%;
            height: 368px;
            background: linear-gradient(180deg,
                rgba(15, 11, 51, 0.2) 0%,
                rgba(15, 11, 51, 0.81) 100%);

            .ecology-img {
              width: 100%;
              height: 280px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                max-width: 230px;
                max-height: 230px;
              }
            }
          }

          .ecology-bottom {
            height: 72px;
            padding: 0 30px;
            box-sizing: border-box;
            background-color: #fff;

            .el-icon {
              border-radius: 50%;
              padding: 4px;
              transition: all 0.3s;
              transform: translateX(-10px);
            }
          }

          &:hover {
            box-shadow: 0 0 10px 0 rgba(96, 96, 96, 0.5);

            .ecology-bottom>.el-icon {
              cursor: pointer;
              transform: translateX(10px);
              color: #fff;
              background-color: #447fdb;
            }
          }
        }
      }
    }
  }

  :deep(.el-input__wrapper) {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
</style>